<!DOCTYPE html>
<html>
<head>
    <title>Learn With Me</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <link rel="stylesheet" href="./css/content.css" />
    <link rel="stylesheet" href="./css/register.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB3GDwxbRGGl7jBkaDBU64G7yI8R8CkA1s&sensor=false"></script>
    <script type="text/javascript" src="./scripts/login.js"></script>
    <script type="text/javascript" src="./scripts/login_check.js"></script>
    <script type="text/javascript" src="./scripts/group_search.js"></script>
    <script type="text/javascript" src="./scripts/register.js"></script>
    <script type="text/javascript" src="./scripts/home.js"></script>
    <script type="text/javascript" src="./scripts/load_footer.js"></script>
    <script type="text/javascript" src="./scripts/mobile_init.js"></script>
    <script type="text/javascript" src="./scripts/open_new.js"></script>
    <script type="text/javascript" src="./scripts/ranks.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
    <script type="text/javascript" src="./scripts/datetime.js"></script>
    <script type="text/javascript" src="./scripts/approve.js"></script>
    <script type="text/javascript" src="./scripts/groups_in.js"></script>
    <script type="text/javascript" src="./scripts/logo_oriantation.js"></script>
    <link rel="stylesheet" href="./css/chat.css" />
    <script type="text/javascript" src="./scripts/chat.js"></script>
    <script type="text/javascript" src="./scripts/shake.js"></script>
</head>
<body>

<div data-role="page" id="home">
    <div data-theme="a" data-role="header" data-inset="true">
        <a href="#sys_msgs" data-icon="info">Messages</a>
        <h3>Home</h3>
    </div>

    <div data-role="content">
        <h1 id="username"></h1>
        <div id="useremail"></div>
        <div id="major"></div>
        <h2>Welcome to </h2>

        <img src="./images/logo.png" id="imgLogo" class="logo" style="width:100%"/><br/><br/><br/>
        <a href="#about" data-role="button" data-inline="true"  data-rel="dialog" data-transition="slidedown">
                 <span class="ui-btn-inner ui-btn-corner-all">
                     <span class="ui-btn-text">About</span>
                 </span>
        </a>

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="sys_msgs">
    <div data-theme="a" data-role="header" data-inset="true">
        <a href="#home" data-icon="home">Home</a>
        <h3>Messages</h3>
    </div>

    <div data-role="content">
        <div>
            <form id="msg_form">
                Here you can invite people to your study group and advertise it! Or, you could remind others of the upcomming meetings or maybe even just chit-chat!
                <br/><br/>
                <fieldset>
                    <label for="msg">Your Message:</label>
                    <input type="text" name="msg" id="msg" value=""  />
                </fieldset>
                <fieldset>
                    <input id="post_submit" type="submit" value="Post" data-role="button" data-inline="true" data-theme="b" />
                </fieldset>
            </form>
        </div>
        <div id="content_msgs" class='msgContainerDiv'></div>
        <hr />
        <fieldset>
                <span id='connectspan'>
                    <input id="connect" value="Connect" type="submit" data-role="button" data-mini="true" data-inline="true" data-theme="b" />
                </span>
                <span id='disconnectspan'>
                   <input id="disconnect"  value="Disconnect" type="submit"  data-role="button" data-mini="true" data-inline="true" data-theme="b" />
                </span>
        </fieldset>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="about">
    <div data-theme="a" data-role="header" data-inset="true">
        <h3>About Learn With Me</h3>
    </div>
    <div data-role="content">
        <h1>
            LearnWithMe! was written by:  <br>
            Yuval, Yael & Milkana
        </h1>
        <a href="docs-dialogs.html" data-role="button" data-rel="back">
             <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">Close</span>
             </span>
        </a>
    </div>

</div>

<div data-role="page" id="groupsearch">
    <div data-theme="a" data-role="header" data-inset="true">
        <a href="#home" data-icon="home">Home</a>
        <h3>
            Find Groups
        </h3>
        <a href="#sys_msgs" data-icon="info">Messages</a>
    </div>

    <div data-role="content">

        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Choose course:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option></option>
            </select>
        </div>


        <div id="map"></div>

    </div>


    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="newgroup">
    <div data-theme="a" data-role="header">
        <a href="#home" data-icon="home">Home</a>
        <h3>
            Create a new Study Group
        </h3>
        <a href="#sys_msgs" data-icon="info">Messages</a>
    </div>

    <div data-role="content">

        <form id="openNewForm">

            <fieldset data-role="fieldcontain">
                <label for="new_course">Course:</label>
                <select id="new_course" name="new_course" class="required">
                    <option value="">Select Course</option>
                </select>
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="new_target">Target.
                    Ex: Presentations, Homework etc
                </label>
                <input type="text" class="required" name="new_target" id="new_target"/>
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="new_start_date"> Date:</label>
                <input class="required" name="new_start_date" id="new_start_date" type="date" data-role="datebox" data-options='{"mode": "calbox","afterToday": true, "overrideDateFormat":"%Y-%m-%d" }'>
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="new_start_time"> Hour:</label>
                <input class="required" name="new_start_time" type="date" data-role="datebox" data-options='{"mode": "timebox", "overrideTimeFormat": 24}' id="new_start_time" />
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="new_location_desc">Location. Address or Description.
                    Ex: "Karlibach Tel Aviv", "Library" etc</label>
                <input type="text" name="new_location_desc" class="required" id="new_location_desc"/>
                <input type="button" onclick="showAddress(new_location_desc.value);" name="find Address" id="find Address" value="Find Address on Map!" data-role="button" data-inline="true" data-theme="b"/>
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="latitude">Choose Location</label>

                <input name="latitude" id="latitude" value="" type="hidden" placeholder="Latitude"/>
                <input name="longitude" id="longitude"  value="" type="hidden" placeholder="Longitude" />


                <div id="new_map"></div>

            </fieldset>

            <input type="submit" value="Open new Group!" id="submit_new"/>
        </form>

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="approve">
    <div data-theme="a" data-role="header">
        <a href="#home" data-icon="home">Home</a>
        <h3>
            Approve Friends
        </h3>
        <a href="#sys_msgs" data-icon="info">Messages</a>
    </div>

    <div data-role="content">

        <div data-role="content">
            <h2>Awaiting users in your groups:</h2>
            <ul data-role="listview" data-inset="true" data-filter="false" id="awaiting_data" data-theme="c">
            </ul>
        </div>

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="groupsin">
    <div data-theme="a" data-role="header">
        <a href="#home" data-icon="home">Home</a>
        <h3>
            Groups I'm In
        </h3>
        <a href="#sys_msgs" data-icon="info">Messages</a>
    </div>

    <div data-role="content">

        <div data-role="content">
            <h2>Groups you're in:</h2>
            <ul data-role="listview" data-inset="true" data-filter="true" id="groups_list" data-theme="c">
            </ul>
        </div>

    </div>

    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="usersrank">
    <div data-theme="a" data-role="header">
        <a href="#home" data-icon="home">Home</a>
        <h3>
            Users' Ranks
        </h3>
        <a href="#sys_msgs" data-icon="info">Messages</a>
    </div>

    <div data-role="content">
        <h2>Ranks list</h2>
        <ul data-role="listview" data-inset="true" data-filter="true" id="rank-data" data-theme="c">
        </ul>
    </div>



    <div data-theme="a" data-role="footer" data-position="fixed"  class="footerDiv"></div>

</div>

<div data-role="page" id="login">
    <div data-theme="a" data-role="header" data-inset="true">
        <h3>Login</h3>
    </div>
    <div data-role="content">

        <form id="loginForm">
            <fieldset>
                <fieldset>
                    <label for="email">Email:</label>
                    <input type="email" name="email" id="email" class="required" value=""  />
                </fieldset>
                <fieldset>
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password" class="required" value="" />
                </fieldset>
                <fieldset>
                    <input id="login_submit" type="submit" value="Login" data-role="button" data-inline="true" data-theme="b" />
                </fieldset>
                <hr />
                Don't have a login? <a href="#register">Sign Up</a>
            </fieldset>
        </form>
    </div>
</div>

<div data-role="page" id="register">
    <div data-theme="a" data-role="header" data-inset="true">
        <h3>Register</h3>
    </div>
    <div data-role="content">
        <form id="registerForm">

            <fieldset data-role="fieldcontain">
                <label for="reg_email">Email:</label>
                <input type="email" name="reg_email" id="reg_email" class="required email">
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="reg_username">Your name:</label>
                <input type="text" name="reg_username" id="reg_username" class="required">
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="reg_password">Password:</label>
                <input type="password" name="reg_password" id="reg_password" class="required" minlength="5">
            </fieldset>

            <fieldset data-role="fieldcontain">
                <label for="reg_major">Major:</label>
                <select id="reg_major" name="reg_major" class="required">
                    <option value="">Select One</option>
                </select>
            </fieldset>

            <input type="submit" value="Register" id="submit_register">

        </form>

    </div>
</div>


</body>


</html>
